<template>
  <div>
    <HomePageNav></HomePageNav>
    <div class="g-bg g-bg1 clearfix">
      <div class="g-mn4">
        <div class="g-mn4c">
          <div class="g-wrap6">
            <SongInfo :songInfo="SInfo"></SongInfo>
            <CommentsSectionBox></CommentsSectionBox>
          </div>
        </div>
      </div>
    </div>
    <Copyright></Copyright>
  </div>
</template>

<script>
import HomePageNav from "@/components/HomePageNav/HomePageNav.vue";
import Copyright from "@/encapsulation/Copyright.vue";
import SongInfo from "@/pages/songPage/SongInfo.vue";
import CommentsSectionBox from "@/encapsulation/comments/CommentsSectionBox.vue";
import { getCommentMusicFn } from "@/api/index.js";
import { provide } from "@vue/runtime-core";
import { shallowRef } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getSongDeteilFn } from "@/api/index.js";
import addAndPlaySongMixin from "@/baseFnMixin/playlist/addAndPlaySongMixin.js";
import addPlayListMixin from "@/baseFnMixin/playlist/addPlayListMixin.js";
// import { useStore } from "vuex";

export default {
  name: "SongPage",
  components: { HomePageNav, Copyright, SongInfo, CommentsSectionBox },
  setup() {
    const route = useRoute();
    const router = useRouter();
    let comment = shallowRef(null);
    //  判断参数中是否有id属性
    if (!("id" in route.query)) {
      router.push({
        name: "err",
        params: {
          err: route.fullPath,
        },
      });
    }

    let info = {
      id: route.query.id,
      type: 0,
    };
    let SInfo = shallowRef(null);

    getSongDeteilFn(route.query.id)
      .then((response) => {
        if (response.data.songs.length) {
          SInfo.value = response.data.songs[0];
        } else {
          //   当路由参数中id出错时,跳转到 404err路由页面
          router.push({
            name: "err",
            params: {
              err: route.fullPath,
            },
          });
        }
      })
      .catch((err) => {
        console.log(err);
      });
    //  传给复用组件中的评论区组件
    provide("comment", { comment, getComment, info });
    function getComment(index) {
      getCommentMusicFn(route.query.id, index)
        .then((response) => {
          comment.value = response.data;
        })
        .catch((err) => {
          console.log(err);
        });
    }
    getComment();
    //  将播放功能传递给复用组件pageSongFn文件中的SongPlay.vue
    const Cplay = addAndPlaySongMixin();
    function play() {
      Cplay(SInfo.value);
    }
    provide("Cplay", play);

    //
    const Sadd = addPlayListMixin();
    function add() {
      Sadd(SInfo.value);
    }
    provide("add", add);
    return {
      SInfo,
    };
  },
};
</script>

<style scoped lang="less"></style>
